<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>楚路路个人首页</title>
		<meta name="zbl" content="楚路路的个人首页">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="shortcut icon" href="images/icon-logo.png" />
		<link rel="stylesheet" href="css/corner.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/font.css">
		<link rel="stylesheet" href="css/style.css">
		<style>
			.pace-running{
				overflow: hidden;
			}
			.pace-running::before {
				width: 100%;
				height: 100%;
				display: block;
				content: "";
				background: #eee;
			}
		</style>
	</head>
	<body>
		<div class="head">
			<a href="#" class="hed-box">
				<img src="images/tx_logo.jpg" class="tx" alt="">
				<!-- <img src="images/logo.png" class="logo" alt=""> -->
				<div class="box-txt">你好，我是楚路路</div>
			</a>
			<p class="head-title">你好，我是楚路路</p>
			<nav>
				<div class="nav">
					<div class="navInner">
						<div class="navBtn">
							<span></span><span></span><span></span>
						</div>
					</div>
					<p class="tiShi">导航</p>
				</div>
				<div class="navBox">
					<div class="navDv">
						<span class="active"><a href="javascript:;">首页</a></span>
						<span><a href="javascript:;">关于我</a></span>
						<span><a href="javascript:;">技能掌握</a></span>
						<span><a href="javascript:;">我的经历</a></span>
						<span><a href="javascript:;">我的作品</a></span>
						<span><a href="javascript:;">联系我</a></span>
					</div>
				</div>
			</nav>
		</div>
		<div class="swiper-body swiper-container swiper-no-swiping">
			<div class="swiper-wrapper">
				<header class="swiper-slide Zinn">
					<div class="container-fluid">
						<div class="banner">
							<div class="banner-inner">
								<iframe src="unit/wow slider.html"
									style="width:100%;height:100%;max-width:100%;overflow:hidden;border:none;display:block;"
									marginheight="0" marginwidth="0"></iframe>
								<div class="Mask"></div>
							</div>
							<div class="banner-txt">
								<div class="banTxt" data-offset="5">
									<h1 class="center__text glitch" data-text="Hello,我是楚路路">Hello, 我是楚路路</h1>
									<p>我是楚路路</p>
									<p>WEB前端开发工程师</p>
									<p class="youX">
										<a href="tel:18656030973"
										   target="z">18656030973</a>
									</p>
								</div>
							</div>
						</div>

					</div>
				</header>
				<div class="swiper-slide aboutMe Zinn">
					<div class="Mask"></div>
					<div class="Z-introduce-me">
						<div class="swiper-demo"></div>
						<div class="meImg">
							<img src="images/meimg.jpg" alt="">
						</div>
						<div class="meTxt">
							<h2>关于我</h2>
							<h3>- 您好，我是楚路路</h3>
							<p>WEB前端工程师。</p>
							<h3>- 我能效劳</h3>
							<p>前端web开发与制作,网站web开发</p>
							<h3>- 关于我</h3>
							<p>坐标合肥。目前任职于北京雍禾医疗投资管理有限公司(合肥分部)，程序员(偏前端)一枚，主要从事web前端开发与制作。技术栈(传统html/css/javasript,Es6,vue,ElementUi 等等)</p>
							<p>喜欢参与团队工作与集体活动。重视自身素质培养。</p>
						</div>
					</div>
				</div>
				<div class="swiper-slide Jis-mastery Zinn">
					<div class="Mask"></div>
					<div class="Z-mastery">
						<h2>技能<span>掌握</span></h2>
						<div class="btns">
							<button class="Yes">JavaScript</button>
							<button class="Yes">vue.js</button>
							<button class="Yes">layUi</button>
							<button class="Yes">elementUi</button>
							<button class="Yes">AJAX</button>
							<button class="Yes">echart</button>
							<button class="Yes">小程序</button>
							<button>es6</button>
							<button>Less</button>
							<button>Photoshop</button>
							<button>Git</button>
						</div>
						<div class="box">
							<div class="complete Yes one">
								<p>BootStrap</p>
								<div class="comp-inner html"></div>
							</div>
							<div class="complete Yes two">
								<p>vue</p>
								<div class="comp-inner css"></div>
							</div>
							<div class="complete Yes three">
								<p>Ajax</p>
								<div class="comp-inner bs"></div>
							</div>
							<div class="complete Yes four">
								<p>JavaScript</p>
								<div class="comp-inner js"></div>
							</div>
							<div class="complete Yes two">
								<p>ElementUi</p>
								<div class="comp-inner ajax"></div>
							</div>

							<div class="complete one">
								<p>Vue.js</p>
								<div class="comp-inner vue"></div>
							</div>
							<div class="complete two">
								<p>Less</p>
								<div class="comp-inner less"></div>
							</div>
							<div class="complete three">
								<p>Photoshop</p>
								<div class="comp-inner photo"></div>
							</div>
							<div class="complete four">
								<p>Git</p>
								<div class="comp-inner git"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide Me-process Zinn">
					<div class="Mask"></div>
					<div class="Z-process">
						<div class="title">
							<h3>我的成长史</h3>
							<div class="inner">
								<div class="box">
									<div class="txt">
										<i>2016</i><span>YEAR</span>
									</div>
									<div class="clock"></div>
								</div>
								<ul class="coud">
									<li class="active">2016</li>
									<li>2021</li>
								</ul>
							</div>
						</div>
						<ul class="Z-date">
							<li class="active">
								<span class="year">2016年</span>
								<span class="md">08月</span>
								<i></i>
								<b></b>
							</li>
							<li class="active">
								<span class="year">2018</span>
								<span class="md">05月至今</span>
								<i></i>
								<b></b>
							</li>
							<li>
								<span class="year">至今</span>
								<span class="md">12月</span>
								<i></i>
								<b></b>
							</li>
						</ul>
						<div class="Z-work">
							<ul>
								<li class="active">
									<h3 class="title">安徽中工物流有限公司 </h3>
									<p class="txt">
										<span>
											<span>	<信息主管> </span> 负责公司新业务TMS运输系统的上线对接和发布，包括系统需求调研，研发协调，跟踪反馈和上线测测试。系统维护 </p> </li> <li
											 class="active">
												
												<h3 class="title">来到北京雍禾医疗投资管理有限公司(合肥)</h3>
												<p class="txt">
													<span>
														<程序员(偏前端)> </span> 根据业务部门需求，通过使用boostrap,layui,elmentui 等前端框架制作各种web响应式页面，接口联调、微信小程序原生开发，uniApp打包各类小程序等,后端基于thinkphp，主要用来搜集表单数据。 </p> </li> <li>
															<h3 class="title">北京雍禾医疗投资管理有限公司(合肥)</h3>
															<p class="txt">
																<span>
																	<大专>
																</span>
																 <br />
																
															</p>
								</li>
							</ul>
						</div>

					</div>
				</div>
				<div class="swiper-slide My-works Zinn">
					<div class="Mask"></div>
					<div class="Z-works">
						<h2 class="title">作品<span>赏析</span></h2>
						<div class="left">
							<div class="border"></div>
							<div class="wrapper">
								<div class="carousel">
									<a href="http://cll835036768.gitee.io/resume-of-cll" target="z">
										<i class="txtIcon"></i>
										<img src="images/works-me.jpg" />
									</a>
								
									<a href="https://gitee.com/cll835036768/wx" target="z">
										<i class="txtIcon"></i>
										<img src="images/works-wxxcx.png" />
									</a>
									<a href="https://zlftj.com/" target="z">
										<i class="txtIcon"></i>
										<img src="images/woks-zlf.png" />
									</a>
								</div>
							</div>
							<div class="pager"></div>
						</div>
						<div class="right">
							<div class="border"></div>
							<div class="wrapper">
								<div class="carousel">
									<a href="https://gitee.com/micloud0927/sdvp-frontend.git" target="z">
										<i class="txtIcon"></i>
										<img src="images/work-ksh.png" />
									</a>
								
									<a href="http://www.zhifa.cc" target="z">
										<i class="txtIcon"></i>
										<img src="images/works-yhzf.png" />
									</a>
								</div>
							</div>
							<div class="pager"></div>
						</div>
						<div class="swiper-inner swiper-container">
						    <div class="swiper-wrapper">
							    <a href="#" class="swiper-slide" style="background-image:url(images/works-me.jpg)"></a>
							    <a href="#" class="swiper-slide" style="background-image:url(images/works-wxxcx.png)"></a>
							    <a href="#" class="swiper-slide" style="background-image:url(images/works-zlf.png)"></a>
							    <a href="#" class="swiper-slide" style="background-image:url(images/works-ksh.png)"></a>
							    <a href="#" class="swiper-slide" style="background-image:url(images/works-yhzf.png)"></a>
							    
						    </div>
						    <!-- Add Pagination -->
						   	<div class="swiper-pagination"></div>
						</div>
					</div>
				</div>
				<div class="swiper-slide Me-contact Zinn">
					<div class="Mask"></div>
					<div class="Z-contact">
						<div class="box-top"></div>
						<div class="box-bottom"></div>
						<h2>CONTACT<span>FOR ME</span></h2>
						<div class="lian-bottom">
							<p class="lian-title">
								<i>灵感</i>
								<i>代码</i>
								<i>梦想</i>
								<i>未来</i>
							</p>
							<p class="lian-txt">
								学习是一个充实愉悦的过程<br>喜欢尝试，期待新鲜事物<br>前端即兴趣，兴趣即未来<br>行路有良友，便是捷径<br>期待有机会与您共事！
							</p>
							<div class="lian-lo">
								<a href="https://gitee.com/cll835036768/" target="z" class="icon iconfont">&#xe501;<span>码云</span></a>
								
								<a href="#" class="icon iconfont img">&#xe7bd;
									<span>微信<img src="images/wx1.png" alt=""></span>
								</a>
							</div>
						</div>
					</div>
					<p class="ban">© 2019 ZhuBingLin</p>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>


		<div class="Z-head">
			
		</div>





		<script data-pace-options='{ "ajax": false }' src='js/pace.js'></script>
		<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/script.js"></script>
		<script>
			// come on.go go go~~~
			var $banTxt = $('.banTxt'),
					w = $(window).width(), //window width
					h = $(window).height(); //window height
			$banTxt.on('mousemove', function(e) {
				var offsetX = 0.5 - e.pageX / w, // 光标位置X
						offsetY = 0.5 - e.pageY / h, // 光标位置Y
						offsetPoster = $banTxt.data('offset'),
						transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; // 设置 transform
				//添加 transform
				$banTxt.css('transform', transformPoster);
			});

		</script>
	</body>
</html>
